<template>
  <div>
    <!-- Navbar -->
    <nav class="navbar navbar-light navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <router-link to="/intro"><span class="navbar-brand">快捷商店</span></router-link>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><router-link to="/">每日推荐</router-link></li>
            <li><router-link to="/productlist">全部商品</router-link></li>
            <li><router-link to="/classify">商品分类</router-link></li>
            <li><router-link to="/Apt">商品补货</router-link></li>
            <li><router-link to="/system-message">系统消息</router-link></li>
            <li><router-link to="/chatComponent">联系客服</router-link></li>
          </ul>
          <ul class="nav navbar-nav navbar-right littleright">
            <li><router-link to="/login"><span class="glyphicon glyphicon-user"></span>
              <span v-if="username === ''">游客</span>
              <span v-else>{{ username }}</span>
            </router-link></li>
            <li>
              <!-- 购物车 -->
              <router-link to="/cart">
                <span class="glyphicon glyphicon-shopping-cart" 
                  :class="{'text-danger': cart.cartCount > 0}" 
                  aria-hidden="true">
                </span>
                购物车
                <span class="badge" v-if="cart.cartCount > 0">{{ cart.cartCount }}</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import { inject } from 'vue';
export default {
  name: 'Header',
  props: {
    username: String,
  },
  setup() {
    // 注入购物车状态
    const cart = inject('cart');
    return { cart };
  },
};
</script>

<style scoped>
.littleright {
  margin-right: 5px;
}

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

body {
  padding-top: 70px;
}

.text-danger {
  color: red !important;
}

.badge {
  background-color: red;
  color: white;
  font-size: 14px;
  position: absolute;
  top: 3px;
  right: -3px;
  padding: 3px 7px;
}
</style>
